<template>
  <view class="tool-list">
    <view class="title">必备工具</view>
    <view class="grid">
      <view class="tool-item"
        v-for="(item, index) in tools"
        :key="index"
        @click="navigateTo(item.url)"
      >
        <view class="icon-wrapper">
          <image class="tool-icon" :src="item.icon" mode="aspectFit"></image>
        </view>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const tools = ref([
  { label: '我的评价', icon: '/static/icons/comment.svg', url: '/pages/user/review' },
  { label: '收货地址', icon: '/static/icons/location.svg', url: '/pages/user/address' },
  { label: '领券中心', icon: '/static/icons/ticket.svg', url: '/pages/user/coupon' },
  { label: '退款售后', icon: '/static/icons/refund.svg', url: '/pages/user/after-sale' },
  { label: '客服', icon: '/static/icons/service.svg', url: '/pages/user/service' },
  { label: '设置', icon: '/static/icons/setting.svg', url: '/pages/user/settings' }
])

const navigateTo = (url) => {
  uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.tool-list {
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    padding: 0 10rpx;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40rpx 20rpx;
    padding: 0 10rpx;

    .tool-item {
      text-align: center;

      .icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16rpx;

        .tool-icon {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .label {
        font-size: 26rpx;
        color: #333;
        display: block;
      }
    }
  }
}
</style>
